import React, { Component } from 'react';
import { Link, Route, Switch } from 'react-router-dom';

const Sandwiches = (props) => <div>Sandwiches</div>;


const routes = [
    {
        path: '/sandwiches',
        component: Sandwiches
    },
    {
        path: '/tacos',
        component: Tacos,
        routes: [
            {
                path: '/tacos/bus',
                component: Bus
            },
            {
                path: '/tacos/cart',
                component: Cart
            }
        ]
    }
];

function Tacos (props) {
    const { routes } = props;
    return (
        <div>
            <ul>
                {
                    routes.map(({ path }) => (
                        <li key={path}><Link to={path}>{path.substr(1)}</Link></li>
                    ))
                }
            </ul>
            <Switch>
                {
                    routes.map((item, idx) => (
                        <RouteWithSubRoutes key={idx} {...item} />
                    ))
                }
            </Switch>
        </div>
    );
}

function Bus () {
    return (
        <div>Bus</div>
    );
}

function Cart () {
    return (
        <div>Cart</div>
    );
}

function RouteWithSubRoutes (props) {
    return (
        <Route path={props.path} children={() => <props.component {...props} />} />
    );
}

class RouteConfig extends Component {
    render () {
        return (
            <div>
                <ul>
                    {
                        routes.map((item, idx) => (
                            <li key={idx}>
                                <Link to={item.path}>{item.path.substr(1)}</Link>
                            </li>
                        ))
                    }
                </ul>
                <Switch>
                    {
                        routes.map((item, idx) => (
                            <RouteWithSubRoutes key={idx} {...item} />
                        ))
                    }
                </Switch>
            </div>
        );
    }
}

export default RouteConfig;
